<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,
ol {
  list-style: none;
}

.box{
    overflow: hidden;
    position: relative;
    width: 1000px;
    margin: 100px auto;
}
.box::before{
    /* 行内元素加了定位可给高度和宽度 */
    position: absolute;
    top: -50px;
    left: 0;
    content: "";
    width: 100%;
    height: 100px;
    background-color: white;
    border-radius: 50%;
}
.box::after{
    /* 行内元素加了定位可给高度和宽度 */
    position: absolute;
    bottom: -50px;
    left: 0;
    content: "";
    width: 100%;
    height: 100px;
    background-color: white;
    border-radius: 50%;
}
.box ul{
    display: flex;
    gap: 15px;
    /* 水平滚动条 */
    overflow-x: scroll;
    
    scrollbar-width: none;
    /* 平滑滚动 */
    scroll-behavior: smooth;
}
.box ul li{
    /* width: 200px;防止子盒子被压缩 */
    flex: 0 0 200px;
}
.box ul li img{
    width: 100%;

}
</style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
            <li><a href="#"><img src="./img/1.png"alt=""></a></li>
        </ul>
    </div>
    <!-- 粘过来的 -->
    <script>
    // 获取可滚动的容器
    const scrollContainer = document.querySelector('.box ul');
    // 监听鼠标滚轮事件
    scrollContainer.addEventListener('wheel', (e) => {
      // 阻止默认的垂直滚动行为
      e.preventDefault();
      // 根据滚轮的垂直滚动量（deltaY）调整横向滚动量（scrollLeft）
      // 乘以系数（如 1.5）可调整滚动灵敏度
      scrollContainer.scrollLeft += e.deltaY * 3;
    });
  </script>
</body>
</html>